<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';
import { store } from '../store/store.js'
const router = useRouter();

const units = ref([{ title: 'test' }])
fetch("/api/dict").then(response => response.json()).then(data => units.value = data)

function updateLessons() {
    units.value.forEach(unit => {
        const lessons = unit.lesson
        lessons.forEach(lesson => {
            lesson.word.forEach(word => {
                word.checked = lesson.checked
            })
        })
    })
}

function printOut() {
    let outTitle = ''
    const outWords = []
    units.value.forEach(unit => {
        const lessons = unit.lesson
        lessons.forEach(lesson => {
            if (lesson.checked) { outTitle += `${lesson.title} 、` }
            lesson.word.forEach(word => {
                if (word.checked) { outWords.push(word.word_value) }
            })
        })
    })
    store.updateWords(outWords)
    store.setTitle(outTitle)
    router.push('/print')
}
</script>
<template>
    <div v-for="unit in units">
        <a-typography-title>{{ unit.title }}</a-typography-title>
        <div v-for="lesson in unit.lesson">
            <a-typography-title :heading="3">
                <!--这里是年级-->
                {{ lesson.title }} <a-checkbox v-model="lesson.checked" @change="updateLessons"></a-checkbox>
            </a-typography-title>
            <div class="card-container">
                <a-card v-for="word in lesson.word" :style="{ width: '360px', margin: '10px' }"
                    :title="word.word_value">
                    <template #extra>
                        <a-checkbox v-model="word.checked"></a-checkbox>
                    </template>
                    <div>写过：{{ word.choose_count }}次</div>
                    <div>正确：{{ word.success_count }}次</div>
                </a-card>
            </div>
        </div>
        <a-button type="primary" shape="round" class="float-button" @click="printOut">
            打印
        </a-button>
    </div>
</template>
<style scoped>
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.float-button {
    position: fixed;
    /* 固定定位 */
    bottom: 20px;
    /* 距离底部的距离 */
    right: 20px;
    /* 距离右侧的距离 */
    z-index: 1000;
    /* 确保按钮在最上层，不会被其他内容遮挡 */
}
</style>